<template>
	<view class="px-[20rpx]">
		<view class="bg-white rounded-[20rpx] px-[20rpx]  mt-[20rpx]">
			<view class="pt-[40rpx] px-[0rpx] types">
				请输入新的手机号
			</view>
			<view  class="flex h-[110rpx] text-[30rpx] items-center ">
				<view class="flex items-center w-[170rpx] typess ">
					<p>+86</p>
				</view>
				<!-- -->
				<view class="">
					<up--input v-model="user.iphone" border="none" style=" background-color: white;"
						placeholder="请输入新的手机号"></up--input>
				</view>
			</view>
			<view class="oneboder">
				
			</view>
			<!-- <u-divider></u-divider> -->
			<view class="flex h-[106rpx]  text-[30rpx] items-center ">
				<view class="flex items-center w-[180rpx] typess">
					<p>验证码</p>
				</view>
				<!-- -->
				<view class="">
					<up-input v-model="user.iphoneCode" border="none" style=" background-color: white;"
						placeholder="请输入验证码">
					</up-input>
				</view>
				<view v-if="state.showTime">
					<text style="background-color: white;">{{state.currentCountTime}} s</text>
				</view>
				<view v-else>
					<view class="text-[#FE861C] whitespace-nowrap text-[28rpx] bg-[#FFF2E6] rounded-[10rpx] py-[10rpx] px-[20rpx]" @click="sendCode()">
						{{state.telCode}}
					</view>
				</view>
				<!-- <view class="bg-[#FFF2E6] text-[#FE861C] py-[15rpx] px-[20rpx]">
					获取验证码
				</view> -->
			</view>
		</view>
		<view class="py-[20rpx] px-[20rpx] w-full fixed left-0 bottom-[20rpx] box-border">
			<up-button @click="sendData" color="#FE861C" :customStyle="{borderRadius:'20rpx',height:'98rpx'}">
				确认修改
			</up-button>
		</view>

		<u-modal :show="showtan" :title="Modaltitle" :content='Modalcontent' :showCancelButton='true'
			@confirm='confirm()' @cancel='cancel()'></u-modal>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getCode,
		phone,
		untiephone
	} from '@/api/my.js'
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		editmemberphone
	} from "@/api/home.js"
	let user = reactive({
		iphoneCode: '',
		iphone: '',
		telCode: '',
	})
	let state = reactive({
		loading: false,
		countTime: 60,
		currentCountTime: 0,
		showTime: false,
		timeId: null,
		telCode: "发送验证码"
	})
	let sendCode = () => {
		// console.log("发送短信")
		if (user.phone == '') {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none',
				duration: 1000
			});
			return
		}
		uni.showLoading({
			title: '',
			mask: false
		});
		getCode({
			phone: user.iphone,
			msgType: 3
		}).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 1000
			});
			handleStartTimer()
		}).catch(err => {
			uni.showToast({
				title: err,
				icon: 'error',
				duration: 1000

			});
			console.log("err", err);
		}).finally(() => {
			uni.hideLoading()
		})
	}
	/**
	 * 短信倒计时
	 */
	let handleStartTimer = () => {
		console.log("1");
		state.showTime = true
		// if (state.showTime && state.currentCountTime !== state.countTime) return
		state.telCode = "重新发送"
		state.currentCountTime = 60
		state.timeId = setInterval(() => {
			console.log("12");
			state.currentCountTime--
			if (state.currentCountTime <= 0) {
				state.currentCountTime = state.countTime
				state.showTime = false
				clearInterval(state.timeId)
			}
		}, 1000)
	}

	let showtan = ref(false)
	let showpassword = () => {
		showtan.value = true
	}
	let Modaltitle = ref('')
	let Modalcontent = ref('') //通过短信验证码重置支付密码，是否发送验证码到1341904847?
	let cancel = () => {
		showtan.value = false
	}
	let confirm = () => {
		untiephone({
			phone: user.iphone,
			telCode: user.iphoneCode
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: "发送成功",
					icon: 'none',
					duration: 1000
				});
				uni.navigateTo({
					url: '/page_my/myInfo/myInfo'
				})

			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000
				});
			}
		})
		showtan.value = false
	}
	let sendData = () => {
		if (user.iphoneCode == '') {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			})
			return
		}
		editmemberphone({
			newPhone: user.iphone,
			telCode: user.iphoneCode
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				uni.navigateBack()
			} else {

				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		}).catch(err => {
			// Modalcontent.value = err
			// showtan.value = true
			uni.showToast({
				title: err,
				icon: 'error',
				duration: 1000

			});
			// console.log("err",err);
		})
	}
</script>

<style lang="scss">
	.types {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1A1B1C;
	}

	.typess {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1A1B1C;
	}
       .oneboder{
		   border-bottom: 1px solid #efefef;
		   transform: scaleY(.5);
	   }
</style>